<% content_for(:content_class) { "overlay-sidebar" } %>

<svg width="20" height="20" class="d-none">
  <symbol id="routing-sprite-start" fill="none" stroke="currentColor" stroke-width="2">
    <path d="M10 16 a1 1 0 1 0 0 -2 1 1 0 1 0 0 2 m0 -4 v-8 m2.5 2 l-2.5 -2.5 -2.5 2.5 z" />
  </symbol>
  <symbol id="routing-sprite-destination" fill="none" stroke="currentColor" stroke-width="2">
    <path d="M10 5 a1 1 0 1 0 0 -2 1 1 0 1 0 0 2 m0 12 v-8 m2.5 2 l-2.5 -2.5 -2.5 2.5 z" />
  </symbol>

  <symbol id="routing-sprite-straight" fill="none" stroke="currentColor" stroke-width="2">
    <path d="M10 17 v-13 m2.5 2 l-2.5 -2.5 -2.5 2.5 z" />
  </symbol>
  <symbol id="routing-sprite-slight-right" fill="none" stroke="currentColor" stroke-width="2">
    <path d="M7 17 v-3 q0 -2 2 -4 l5 -5 m0 0 h-3 l3 3 z" />
  </symbol>
  <symbol id="routing-sprite-right" fill="none" stroke="currentColor" stroke-width="2">
    <path d="M8 17 v-5 q0 -3 3 -3 h4 m-2 2.5 l2.5 -2.5 -2.5 -2.5 z" />
  </symbol>
  <symbol id="routing-sprite-sharp-right" fill="none" stroke="currentColor" stroke-width="2">
    <path d="M8 17 v-7 q0 -6 6 0 l2 2 m0 0 v-3 l-3 3 z" />
  </symbol>
  <symbol id="routing-sprite-u-turn-right" fill="none" stroke="currentColor" stroke-width="2">
    <path d="M4 17 v-7 a4.5 4.5 0 0 1 9 0 v5 m2.5 -2 l-2.5 2.5 -2.5 -2.5 z" />
  </symbol>
  <symbol id="routing-sprite-slight-left">
    <use href="#routing-sprite-slight-right" transform="matrix(-1 0 0 1 20 0)" />
  </symbol>
  <symbol id="routing-sprite-left">
    <use href="#routing-sprite-right" transform="matrix(-1 0 0 1 21 0)" />
  </symbol>
  <symbol id="routing-sprite-sharp-left">
    <use href="#routing-sprite-sharp-right" transform="matrix(-1 0 0 1 21 0)" />
  </symbol>
  <symbol id="routing-sprite-u-turn-left">
    <use href="#routing-sprite-u-turn-right" transform="matrix(-1 0 0 1 20 0)" />
  </symbol>

  <symbol id="routing-sprite-roundabout" fill="none" stroke="currentColor" stroke-width="2">
    <path d="M8 17 v-3 a 3 3 0 1 0 0 -6 3 3 0 1 0 0 6 m2 -4 l5 -5 m0 0 h-3 l3 3 z" />
  </symbol>

  <symbol id="routing-sprite-fork-right" fill="none" stroke="currentColor" stroke-width="2">
    <path d="M9 14 q0 -2 -2 -4 l-3 -3" opacity=".5" />
    <path d="M9 17 v-3 q0 -2 2 -4 l5 -5 m0 0 h-3 l3 3 z" />
  </symbol>
  <symbol id="routing-sprite-fork-left">
    <use href="#routing-sprite-fork-right" transform="matrix(-1 0 0 1 20 0)" />
  </symbol>
  <symbol id="routing-sprite-merge-left" fill="none" stroke="currentColor" stroke-width="2">
    <path d="M8 7 q0 2 -2 4 l-3 3" opacity=".5" />
    <path d="M8 4 v3 q0 2 2 4 l5 5 m-5 -5 h3 l-3 3 z" />
  </symbol>
  <symbol id="routing-sprite-merge-right">
    <use href="#routing-sprite-merge-left" transform="matrix(-1 0 0 1 20 0)" />
  </symbol>
  <symbol id="routing-sprite-end-of-road-right" fill="none" stroke="currentColor" stroke-width="2">
    <path d="M2 9 h10" opacity=".5" />
    <path d="M9 17 v-5 q0 -3 3 -3 h4 m-2 2.5 l2.5 -2.5 -2.5 -2.5 z" />
  </symbol>
  <symbol id="routing-sprite-end-of-road-left">
    <use href="#routing-sprite-end-of-road-right" transform="matrix(-1 0 0 1 20 0)" />
  </symbol>
  <symbol id="routing-sprite-exit-right" fill="none" stroke="currentColor" stroke-width="2">
    <path d="M9 14 v-8" opacity=".5" />
    <path d="M9 17 v-3 q0 -2 2 -4 l5 -5 m0 0 h-3 l3 3 z" />
  </symbol>
  <symbol id="routing-sprite-exit-left">
    <use href="#routing-sprite-exit-right" transform="matrix(-1 0 0 1 20 0)" />
  </symbol>

  <symbol id="routing-sprite-ferry" fill="none" stroke="currentColor" stroke-width="1">
    <path d="M10.5 8 l-6 2 l2.5 2 v1.5 a2.828 2.828 0 0 1 1.5 1 a2.828 2.828 0 0 1 4 0 a2.828 2.828 0 0 1 1.5 -1 v-1.5 l2.5 -2 z" fill="currentColor" />
    <path d="M6.5 9.5 v-5 h8 v5 m-5.5 -6 h3" />
    <path d="M5.5 16.5 a1.414 2.828 0 0 1 2 0 a1.414 2.828 0 0 0 2 0 a1.414 2.828 0 0 1 2 0 a1.414 2.828 0 0 0 2 0 a1.414 2.828 0 0 1 2 0" />
  </symbol>
</svg>

<%= render "sidebar_header", :title => t(".title") %>

<div id="directions_loader" hidden>
  <div class="text-center loader">
    <div class="spinner-border" role="status">
      <span class="visually-hidden"><%= t("browse.start_rjs.loading") %></span>
    </div>
  </div>
</div>

<div id="directions_error" hidden></div>

<div id="directions_route" hidden>
  <div class="d-flex align-items-end mb-3">
    <div class="flex-grow-1 text-truncate">
      <span>
        <%= t ".distance" %>: <output id="directions_route_distance"></output>.
        <%= t ".time" %>: <output id="directions_route_time"></output>.
      </span>
      <br>
      <span id="directions_route_ascend_descend">
        <%= t ".ascend" %>: <output id="directions_route_ascend"></output>.
        <%= t ".descend" %>: <output id="directions_route_descend"></output>.
      </span>
    </div>

    <div class="btn-group btn-group-sm">
      <input type="radio" class="btn-check" name="directions_distance_units" id="directions_distance_units_km" autocomplete="off" data-unit="km" checked>
      <label class="btn btn-outline-secondary p-0 px-1" for="directions_distance_units_km"><%= t ".button_km" %></label>

      <input type="radio" class="btn-check" name="directions_distance_units" id="directions_distance_units_mi" autocomplete="off" data-unit="mi">
      <label class="btn btn-outline-secondary p-0 px-1" for="directions_distance_units_mi"><%= t ".button_mi" %></label>
    </div>
  </div>

  <div class="mx-n3">
    <table class='table table-hover table-sm mb-3'>
      <tbody id="directions_route_steps"></tbody>
    </table>
  </div>

  <p class="text-center">
    <%= tag.a t(".download"), :id => "directions_route_download", :download => t(".filename") %>
  </p>

  <p class="text-center">
    <%= t ".directions_courtesy_html", :link => tag.a("", :id => "directions_route_credit", :target => "_blank") %>
  </p>
</div>
